<template>
  <div>
       <div class="home-bar clear">
            <li v-for="(homebarCurrentPage, index) in $store.state.pathArr" :key="index"  :class="{homebarThis : index == $store.state.homebarThisIndex}" @click="setHomebarThisIndex(index)">
              <router-link :to="homebarCurrentPage.path">
                {{homebarCurrentPage.name}}
              </router-link>
                <i :class="{fistNoClose: index == 0}" class="el-icon-close" @click="deleteThisHomebar(index)"></i>
            </li>
       </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    };
  },
  props: ["currentPage"],
  methods: {
    //删除home-bar
    deleteThisHomebar(index) {
      this.$store.commit("deleteThisHomebar", index);   
      var beforeindex = parseInt(index - 1);
      if(index < this.$store.state.pathArr.length){
          this.setHomebarThisIndex(index);
          this.$router.push(this.$store.state.pathArr[index].path)
      }
      else{
        this.setHomebarThisIndex(index - 1);
        this.$router.push(this.$store.state.pathArr[beforeindex].path);
      }
    },
    //点击home-bar切换homebarThis当前样式
    setHomebarThisIndex(index,e) {
      e = e || window.event;
      e.stopPropagation();
      this.$store.state.homebarThisIndex = index;
    }
  },
  mounted() {
    //判断以连接形式访问，则home-bar给当前页面添加homebarThis当前样式
    if (!this.$store.state.homebarOneTime && this.currentPage.path != "/homepage") {
      this.$store.state.pathArr.push({
        path: this.currentPage.path,
        name: this.currentPage.name
      });
      this.$store.state.homebarOneTime = true;
      this.$store.state.homebarThisIndex = 1;
    }
  }
};
</script>

<style lang="less">
.home-bar {
  height: 44px;
  position: fixed;
  left: 160px;
  top: 60px;
  z-index: 100;
  background: #fff;
  width: 100%;
  border-bottom: 1px solid #e2e2e2;
  li {
    font-size: 14px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    position: relative;
    line-height: 44px;
    min-width: 65px;
    padding: 0 10px;
    float: left;
    color: #333;
    cursor: pointer;
    i {
      position: relative;
      margin-left: 8px;
      top: 1px;
      color: #c2c2c2;
      &:hover{
        background-color: #ffa27b;
        color: #fff;
        border-radius: 50%;
      }
    }
    .fistNoClose{
      display: none;
    }
    a {
      color: #202020;
    }
  }
  .homebarThis {
    position: relative;
    background: #f9f9f9;
    border-right: 1px solid #e2e2e2;
    border-left: 1px solid #e2e2e2;
    &:after{
      content: "";
      display: block;
      position: absolute;
      height:1px;
      width: 100%;
      background: #f9f9f9;
      left: 0px;
      bottom: 0px;
    }
  }
}
</style>


